<template>
  <div class="home-footer">
    <div class="footer-left-bg footer-bg"></div>
    <div class="footer-right-bg footer-bg">
        <p class="copy"><a href="https://beian.miit.gov.cn" target="_blank">Copyright&copy; 福建国科信息科技有限公司 版权所有 闽ICP备15016628号-1</a></p>
    </div>
    <div class="footer-content-wrapper">
        <div class="about footer-content">
            <div class="title-wrapper">
                <h3 class="title">关于我们</h3>
                <h4 class="company-name">福建国科信息科技有限公司</h4>
            </div>
            <div class="text-wrapper" v-html="contentTxt"></div>
            <!-- <div class="text-wrapper">
                <p>福建国科信息科技有限公司是国家级高新技术企业，IT领域产教融合的深度实践者，中国高技术服务业联盟重点合作的产教融合专业服务公司。公司注册资金1300万，总部位于厦门，并在福州、泉州、成都、绵阳设有分支机构。</p>
                <p>国科科技主营校企产教融合运营，基于对IT领域产业知识以及高校泛信息化专业课程的准确理解和把握，积极整合地方高校与IT产业链多环节资源，合作高校服务于产业，为高校和企业客户提供优质的人才服务和项目服务。</p>
                <p>公司具备国家高新技术资质，服务能力通过ISO9001质量认证，具备服务政府，能源，通信，金融机构等大型机构的能力。</p>
            </div> -->
            <div class="click-more" @click="goto('about-goktech')">
                <span class="click-text">查看更多</span>
                <i class="line"></i>
            </div>
        </div>
        <div class="contact footer-content">
            <ul class="QR-code clear-fix">
                <li class="QR-item">
                    <h3 class="title">国科微信公众号</h3>
                    <img class="QR-img" src="/img/home/official-code.png" alt="">
                    <p class="tel-mail">电话：0592-6285229</p>
                </li>
                <li class="QR-item">
                    <h3 class="title">国科新浪官方微博</h3>
                    <img class="QR-img" src="/img/home/wibo-code.png" alt="">
                    <p class="tel-mail"><a href="mailto:hr@goktech.cn">邮箱：hr@goktech.cn</a></p>
                </li>
            </ul>
            <div class="foot-nav clear-fix">
                <a href="javascript:;" @click="goto('index')">首页</a>
                <a href="javascript:;" @click="goto('service-introdution')">项目服务</a>
                <a href="javascript:;" @click="goto('develop-introdution')">软件研发</a>
                <a href="javascript:;" @click="goto('college-intro')">国科教育</a>
                <a href="javascript:;" @click="goto('about-goktech')">关于国科</a>
                <a href="javascript:;" @click="goto('jobs-college')">诚聘英才</a>
                <a href="http://www.jikeserv.com/" target="_blank">集客服务</a>
                <!-- <a href="javascript:;" @click="goto('epidemicPrevention')">疫情防控</a> -->
                <a href="https://campus.goktech.cn/screenHome" target="_blank">数据大屏</a>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
// import { goto } from 'api/utils'
import {tAboutGoktech} from '@@/api/getData'
export default {
  name: 'homeFooter',
  data(){
      return{
          contentTxt: ''
      }
  },
  mounted(){
      tAboutGoktech.call(this).then(res=>{
        //   console.log(res)
          this.contentTxt = res[0].content
      })
  },
  methods: {
      goto (routeName){
        this.$router.push({
            name: routeName
        })
      }
  }
}
</script>

<style lang="stylus" scoped>
// @import '~style/reset.styl';
    .home-footer{
        // @extend .clear-fix;
        position: relative;
        width: 100%;
        height: 716px;
        @media (min-width: 1640px){
            height: 947px;
        }

        .footer-bg{
            float: left;
            width: 50%;
            height: 100%;
        }

        .footer-left-bg{
            background-color: #2E2E2E;
        }

        .footer-right-bg{
            position: relative;
            background-color: #1E1E1E;

            .copy{
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 58px;
                background-color: #2e2e2e;
                text-align: center;
                line-height: 58px;
                color: #828282;
                font-size: 12px;
                z-index: 100;
            }
            .copy a{
                color: #828282;
            }
        }

        .footer-content-wrapper{
            // @extend .clear-fix;
            position: absolute;
            left: 50%;
            // width: 1200px;
            height: 100%;
            margin-left: -600px;
            @media (min-width: 1640px){
                // width: 1480px;
                margin-left: -740px;
            }

            .footer-content{
                float: left;
                // width: 50%;
                height: 100%;
            }
            
            .about{
                padding-top: 100px;
                @media (min-width: 1640px){
                    padding-top: 148px;
                }
                .title-wrapper{
                    margin-bottom: 50px;
                    @media (min-width: 1640px){
                        margin-bottom: 35px;
                    }
                    .title{
                        display: inline-block;
                        font-size:36px;
                        font-family:MicrosoftYaHei-Bold;
                        font-weight:bold;
                        color:rgba(255,255,255,1);
                        vertical-align: middle;
                        margin-right: 33px;
                        @media (min-width: 1640px){
                            display: block;
                            font-size: 48px;
                        }
                    }
                    .company-name{
                        display: inline-block;
                        width:232px;
                        height:36px;
                        background-color:#1457FD;
                        text-align: center;
                        line-height: 36px;
                        color: #fff;
                        vertical-align: -5px;
                        @media (min-width: 1640px){
                            display: block;
                            margin-top: 74px;
                        }   
                    } 
                }
                .text-wrapper{
                    width: 540px;
                    color: #A8A8A8;
                    font-size: 14px;
                    line-height: 34px;
                    max-height: 420px;
                    overflow: hidden;
                    @media (min-width: 1640px){
                        width: 630px;
                    }

                    p:nth-child(2){
                        margin: 21px 0;
                    }   
                }
                
                .click-more{
                    position: relative;
                    width: 120px;
                    height: 44px;
                    margin-top: 28px;
                    text-align: center;
                    line-height: 44px;
                    cursor: pointer;
                    // @media (min-width: 1640px){
                    //     margin-top: 65px;
                    // }
                    .click-text{
                        position: relative;
                        font-size:18px;
                        font-family:MicrosoftYaHei-Bold;
                        font-weight:bold;
                        color:rgba(255,255,255,1)
                        z-index: 1;
                    }

                    .line{
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 22px;
                        background-color: #1457FD;
                        transition: height .25s;
                    }

                    &:hover .line{
                        height: 44px;    
                    }
                }
                
            }

            .contact{
                padding-left: 120px;
                @media (min-width: 1640px){
                    padding-left: 200px;
                }
                .QR-code{
                    // @extend .clear-fix;
                    margin: 146px 0 86px;
                    @media (min-width: 1640px){
                        margin: 224px 0 120px;
                    }

                    .QR-item{
                        float: left;
                        width: 180px
                        @media (min-width: 1640px){
                            width: 224px;
                        } 

                        .title{
                            margin-bottom: 20px;
                            font-weight: normal;
                            font-size:16px;
                            font-family:MicrosoftYaHei;
                            color:rgba(245,245,245,1);
                            line-height:16px; 
                        }  
                    }
                    .QR-item + .QR-item{
                        margin-left: 100px;
                        @media (min-width: 1640px){
                            margin-left: 182px;
                        } 
                    }

                    .QR-img{
                        width: 100%;
                    }

                    .tel-mail{
                        margin-top: 60px;
                        height: 44px;
                        background-color: #1457FD;
                        font-family:MicrosoftYaHei-Bold;
                        line-height: 44px;
                        text-align: center;
                        font-size: 14px;
                        color: #fff;
                        @media (min-width: 1640px){
                            font-size: 16px;
                        } 
                    }
                    .tel-mail a{
                        color #fff
                    }

                }
                .foot-nav{
                    // @extend .clear-fix;
                    a{
                        float: left;
                        font-size: 14px;
                        line-height: 14px;
                        color: #828282;
                        text-decoration: none;
                        &:hover{
                            color: #fff;   
                        }
                    }
                    a + a{
                        margin-left: 24px;
                        @media (min-width: 1640px){
                            margin-left: 44px;
                        } 
                    }   
                }    
            }
        }

    }
</style>
